<template>
	<view>
		<u-image width="100%" height="350rpx" src="https://xdsbz.com:802/prod-api/profile/upload/my/1.jpg"></u-image>
		<view class="title">
			<view class="triangle-down"></view>
			<view class="font">
				{{title}}
			</view>
		</view>
		<u-tabs name="dictLabel" count="cate_count" bar-height="8" bar-width="80" :item-width="230" :list="list"
			:is-scroll="false" :current="current" @change="change" active-color="#fff" bgColor="#0E0D0D"
			inactiveColor="#A6A6A6"></u-tabs>
		<view class="list">
			<view class="card" v-for="(item,index) in cp_list" :key="index" @click="clickItem(item)">
				<view class="C-t">
					{{item.prModel}}
				</view>
				<view class="img">
					<image :src="getImage(item.prIoc)" mode=""></image>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getDict,
		getPpxh,
		getBg
	} from "@/common/api.js"
	import {
		url
	} from "@/common/index.js"
	export default {
		data() {
			return {
				title: "",
				current: "",
				list: [],
				cp_list: [],
				param: "",
				src:""
			}
		},
		onLoad(data) {
			this.getDict()
			this.title = data.title
			this.param = data
			this.getlist(data.id, data.code)
			this.getBg()
		},
		methods: {
			async getBg() {
				let data = await getBg(116)
				this.src = url + data.rows[0].baUrl
			},
			
			getlist(id,code) {
				getPpxh({
					prBrand: id,
					prType: code
				}).then(res => {
					this.cp_list = res.rows
				})
			},
			getImage(path) {
				if (path == 0) return url +
					'/profile/upload/2024/04/06/D16638ABD6E7411E8EB2FFDE83C2BD90_20240406232455A004.jpg'
				return url + path
			},
			change(index) {
				this.current = index
				this.getlist(this.param.id,this.list[index].dictCode)
			},
			async getDict() {
				let data = await getDict()
				this.list = data.data
				this.change(0)
			},
			clickItem(item) {
				uni.navigateTo({
					url: "/pagesIndex/quotation/bj?item=" + item.id
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #0E0D0D;
	}

	.title {
		height: 200rpx;
		background-color: #131313;
		padding: ;
	}

	.font {
		color: #fff;
		width: 100%;
		font-size: 36rpx;
		text-align: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #fff;
	}

	.triangle-down {
		position: relative;
		width: 100%;
		height: 50rpx;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid black;
	}

	.triangle-down:after {
		content: "";
		position: absolute;
		right: -20px;
		top: -20px;
		width: 0;
		height: 0;
		border-right: 40px solid transparent;
		border-bottom: 40px solid black;
		background-color: #9A2222;
	}

	.list {
		padding: 20rpx;
	}

	.card {
		border: 1rpx solid #fff;
		border-radius: 20rpx;
		min-height: 220rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.C-t {
		position: absolute;
		top: 20rpx;
		padding: 5rpx 20rpx;
		border-radius: 0 15rpx 15rpx 0;
		background-color: #9A2222;
		color: #fff;
		font-size: 30rpx;
		z-index: 11;
	}

	.img {
		width: 100%;
		height: 220rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	image {
		width: 100%;
		height: 220rpx;
	}

	/deep/ .u-tab-bar {
		background-color: #9A2222 !important;
	}
</style>